<template>
	<view :style="{ '--color': color }">
		<view class="Wrapper">
			<view class="row j-end a-center">
				<view class="d-flex">
					<view class="Btn btnLine" @click="$pop.toJifen()">积分商城</view>
					<view class="Btn" @click="show = true">兑换仓单</view>
				</view>
			</view>
			<view class="foundation">
				<text class="size28 white">账户余额</text>
				<text class="size46 white">{{ accountInfo.money }}</text>
			</view>
		</view>

		<view class="list" v-for="(item, index) in pageData" :key="index">
			<view class="d-flex f-column">
				<text class="black size30 bold500">{{ item.remarks }}</text>
				<text class="color_33 size26 m-top10">{{ item.add_date }}</text>
			</view>
			<text class="add">{{ item.number_text }}</text>
		</view>
		<!-- <view class="list">
			<view class="d-flex f-column">
				<text class="black size30 bold500">云票购买</text>
				<text class="color_33 size26 m-top10">2024-11-13 01:00:00</text>
			</view>
			<text class="privce">- 600</text>
		</view> -->
		<view class="p-top100 p-bot100" v-if="!pageData.length">
			<u-empty mode="list" text="暂无相关内容"></u-empty>
		</view>

		<buyTicket v-if="show" @Shut="Shut"></buyTicket>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import Api from '@/common/Api.js';
	export default {
		data() {
			return {
				show: false,
				accountInfo: '',
				page: 1,
				limit: 10,
				getMore: true,
				pageData: [],
			};
		},
		onLoad() {
			this.getAccountLog();
		},
		methods: {
			async getAccountLog() {
				const Item = await Api.getAccountLog(1, this.page);
				this.accountInfo = Item.accountInfo;
				const result = Item.data || [];
				this.page == 1
					? (this.pageData = result)
					: (this.pageData = [...this.pageData, ...result]);
				if (result.length < this.limit) this.getMore = false;
			},
			Shut() {
				this.show = false;
				this.getAccountLog();
			},
		},
		onReachBottom() {
			if (!this.getMore) return;
			this.page++;
			this.getAccountLog();
		},
		computed: {
			...mapState(['color']),
		},
	};
</script>

<style>
	page {
		background-color: #f2f2f2;
		padding-bottom: 24rpx;
	}
</style>
<style lang="scss" scoped>
	.list {
		width: 690rpx;
		margin: 24rpx auto 0;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.privce {
			font-size: 48rpx;
			font-weight: 500;
			color: #009933;
		}
		.add {
			font-size: 48rpx;
			font-weight: 500;
			color: #ff0000;
		}
	}
	.Wrapper {
		width: 100%;
		padding: 24rpx 40rpx 30rpx 40rpx;
		background-color: #000066;
		color: #fff;

		.Btn {
			color: #fff;
			font-size: 28rpx;
			padding: 0 20rpx;
			position: relative;
		}
		.btnLine:before {
			content: '';
			width: 1px;
			height: 20rpx;
			background-color: #fff;
			position: absolute;
			right: 0;
			top: 10rpx;
		}
		.foundation {
			display: flex;
			flex-direction: column;
		}
		.infoTxt {
			color: #fff;
			font-size: 26rpx;
			margin-top: 20rpx;
		}
	}
</style>
